<template>
	<div class="service-dialog">
    <van-popup
      v-model="dialogVisible"
      class="service-pop"
      position="bottom"
      :style="{ height: '50vh'}"
    >
    <div class="service-wrap">
      <div class="service-wrap-close" @click="closeDialog">
        <span class="img-close"></span>
      </div>
      <div class="service-wrap-top">税费详情</div>
      <ul class="service-wrap-con">
        <li class="info_li">1、该商品另需缴纳的跨境电商综合税，税费以提交订单时的金额为准。</li>
        <li class="info_li">2、根据跨境电子商务零售进口税收政策，自2019年1月1日起个人单笔交易限值人民币5000元，个人年度交易限值人民币26000元。</li>
      </ul>
      <div class="service-wrap-bottom">
        <div class="btn buy-gra-btn" @click="closeDialog">完成</div>
      </div>
    </div>
    </van-popup>
  </div>
</template>

<script>
import Vue from 'vue'
  export default Vue.extend({
    name: 'index',
    props: {
      visible: {
        type: Boolean,
        default: false
      },
      taxData: {
      }
    },
    data() {
      return {
        dialogVisible: false
      }
    },
    mounted() {
      this.dialogVisible = this.visible
    },
    watch: {
      dialogVisible(val) {
        this.$emit('update:visible', val)
      },
      visible(val) {
        this.dialogVisible = val
      }
    },
    methods: {
      // 点击关闭按钮
      closeDialog() {
        this.dialogVisible = false
      }
    }
  })
</script>

<style  lang="scss">
  @import "src/styles/mixin";
  @import "src/styles/variables";
  @import "src/styles/user/coupons/index.scss";
  .service-dialog{
    background: #fff;
    position: relative;
    .service-pop{
      overflow:hidden;
      border-radius:20px 20px 0 0;
    }
    .service-wrap{
      .service-wrap-close{
        position:absolute;
        right:30px;
        top:34px;
        .icon-close{
          font-size:32px;
          color:#999;
        }
        .img-close{
          display: inline-block;
          width: 28px;
          height: 28px;
          background: url(https://img.wifenxiao.com/h5-wfx/images/common/close-icon.png) no-repeat center;
          background-size: 100% 100%;
        }
      }
      &-top{
        padding: 30px 0;
        border-bottom:2px solid #EDEDED;
        text-align: center;
        font-size: 32px;
        color: #333;
      }
      .service-wrap-con{
        padding:30px;
        height: calc(50vh - 100px);
        overflow: auto;
        .info_li{
          font-size:28px;
          line-height:1.5;
          color:#666;
          margin-bottom:40px;
        }
      }
      .service-wrap-bottom{
        position: absolute;
        width: 100%;
        padding: 10px 24px;
        left:0;
        bottom: 0;
        border-top:2px solid #EDEDED;
        .btn{
          padding: 24px 0;
          font-size: 30px;
          line-height: 30px;
          font-weight: 500;
          color: #f5f5f5;
          border-radius: 60px;
          text-align: center;
        }
      }
    }
  }
</style>
